
<template>
  <div class="userGroup">
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>用户分群</span>
      </header>
    </div>
    <div class="card_table">
      <header>
        <div class="left box">
          <el-select
            v-model="tableConfig.runningStatus"
            class="sel_inpLeft"
            size="small"
            multiple
            @change="tableConfig.currentPage = 1;query()"
            placeholder="运行状态"
          >
            <el-option label="待执行" :value="0"></el-option>
            <el-option label="已完成" :value="1"></el-option>
            <!-- <el-option label="已删除" :value="2"></el-option> -->
            <el-option label="已暂停" :value="3"></el-option>
            <el-option label="运行中" :value="10"></el-option>
          </el-select>
          <el-select
            v-model="tableConfig.sourceType"
            class="sel_inpLeft"
            size="small"
            @change="tableConfig.currentPage = 1;query()"
            multiple
            placeholder="创建方式"
          >
            <el-option label="规则创建" :value="1"></el-option>
            <el-option label="结果保存" :value="2"></el-option>
          </el-select>
          <el-select
            v-model="tableConfig.isRoutine"
            class="sel_inpLeft"
            size="small"
            @change="tableConfig.currentPage = 1;query()"
            multiple
            placeholder="更新方式"
          >
            <el-option label="例行" :value="1"></el-option>
            <el-option label="手动" :value="2"></el-option>
          </el-select>
          <el-select
            v-model="tableConfig.computeStatus"
            class="sel_inpLeft"
            size="small"
            @change="tableConfig.currentPage = 1;query()"
            multiple
            placeholder="最后计算状态"
          >
            <el-option label="待执行" :value="0"></el-option>
            <el-option label="成功" :value="1"></el-option>
            <el-option label="失败" :value="2"></el-option>
            <el-option label="执行中" :value="10"></el-option>
            <el-option label="延迟执行" :value="11"></el-option>
          </el-select>
        </div>
        <div class="right box">
          <el-checkbox
            @change="tableConfig.currentPage = 1;query()"
            v-model="tableConfig.isMy"
            class="btn"
          >仅我创建</el-checkbox>
          <el-input
            size="small"
            v-model="tableConfig.cname"
            clearable
            class="sel_inp"
            placeholder="搜素名称"
          >
            <el-button
              @click="tableConfig.currentPage = 1;query()"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
          <el-button
            class="btn"
            @click="createrBool = true"
            v-if="$currentRole>2"
            type="primary"
            size="small"
          >创建分群</el-button>
        </div>
      </header>
      <section>
        <el-table v-loading="tableLoading" :data="tableData" style="width: 100%">
          <el-table-column prop="cname" :show-overflow-tooltip="true" label="分群">
            <template slot-scope="scope">
              <div class="tableChange">
                <span
                  class="blueGreen"
                  @click="routerChange('/dataAnalysis/userIndex/userDetails',{
                  id:scope.row.id
                })"
                >{{scope.row.cname}}</span>
                <i class="el-icon-document"></i>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="userCount" label="人数">
            <template slot-scope="scope">
              <div class="tanleOne">
                <span class="block">
                  <i :class="classChoose(scope.row.computeStatus)"></i>
                  {{scope.row.userCount?scope.row.userCount:'暂无数据'}}
                </span>
                <br>
                <span
                  class="time"
                >{{scope.row.finishedTime?time_change(scope.row.finishedTime):'未知'}}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="sourceType" width="200" label="创建方式">
            <template slot-scope="scope">{{ sourceTypeSwitch(scope.row.sourceType)}}</template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="creatorName"
            width="200"
            label="创建者"
          ></el-table-column>
          <el-table-column align="center" prop="isRoutine" width="200" label="更新方式">
            <template slot-scope="scope">{{ isRoutineSwitch(scope.row.isRoutine)}}</template>
          </el-table-column>
          <el-table-column align="center" v-if="$currentRole>2" width="140" label="操作">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="查看基础信息与规则" placement="top">
                <el-button plain size="mini" @click="createRulesOpen(2,scope.row)" type="text">
                  <i class="el-icon-view bigIcon"></i>
                </el-button>
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="dark" content="下载" placement="top">
                <el-button plain size="mini" type="text">
                  <i class="el-icon-download bigIcon"></i>
                </el-button>
              </el-tooltip> -->
              <el-tooltip
                v-if="scope.row.creatorId==operatorDTO.operatorId"
                class="item"
                effect="dark"
                content="删除用户分群"
                placement="top"
              >
                <el-button @click="groupDel(scope.row)" plain size="mini" type="text">
                  <i class="el-icon-delete bigIcon"></i>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <footer>
        <el-pagination
          :current-page="tableConfig.currentPage"
          @size-change="handleSizeChange"
          @current-change="current_change"
          :page-sizes="[5, 10, 30, 50, 100]"
          :page-size="tableConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableConfig.totalPage"
        ></el-pagination>
      </footer>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      class="diglog_box"
      top="20vh"
      :visible.sync="createrBool"
      width="40%"
    >
      <header slot="title">怎样创建用户分群？</header>
      <section>
        <div class="bolck" @click="createRulesOpen(1,{})">
          <div class="leftBolck">
            <i class="el-icon-document-copy"></i>
          </div>
          <div class="rightBolck">
            <h4>规则创建</h4>
            <p>使用用户属性及行为数据，筛选出符合条件的用户。如：将“过去 7 天有登录行为”的用户，划分为“近期登录用户”用户分群</p>
          </div>
        </div>
      </section>
    </el-dialog>
    <createRules @change="newGroupAdd" :item="activeItem" ref="createdRules"></createRules>
  </div>
</template>

<script>
import createRules from "./createRules.vue";
import { operationCtx } from "@/utils/auth.js";
export default {
  name: "userGroup", // 用户分群
  watch: {},
  data() {
    return {
      // 当前操作
      activeItem: {}, // 传递给规则创建组件的当前操作对象
      tableLoading: false,
      createrBool: false, // 规则创建弹框
      tableConfig: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0, // 表格数据总量
        bookmarkId: "", // 书签ID 保留字段
        appId: null, // 应用标识
        runningStatus: [], // 运行状态
        sourceType: [], // 规则创建 OR  结果保存
        isRoutine: [], // 手动 OR 例行
        isMy: false, // 仅我创建
        computeStatus: [], // 最后一次计算状态
        cname: null // 查询名称 创建者
      }, // 表格查询大对象
      tableData: [], //  表格数据
      operatorDTO: {} // 当前登录信息
    };
  },
  methods: {
    groupDel(obj) {
      this.$confirm("此操作为逻辑删除, 是否继续?", "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.groupDelSure(obj);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async groupDelSure(obj) {
      let _res = await this.$analysisApi.userAnalysis.userGroupDelete({
        id: obj.id
      });
      if (_res&&_res.success) {
        this.$message({
          type: "success",
          message: `删除成功`
        });
        this.tableConfig.currentPage = 1;
        this.query();
      }
    },
    async newGroupAdd(obj) {
      let _res = await this.$analysisApi.userAnalysis.userGroupAdd(obj);
      if (_res&&_res.success) {
        this.tableConfig.currentPage = 1;
        this.query();
      }
    }, // 分群创建响应函数
    classChoose(computeStatus) {
      let res = "未知";
      switch (computeStatus) {
        case 0:
          res = "info";
          break;
        case 1:
          res = "success";
          break;
        case 2:
          res = "danger";
          break;
        case 10:
          res = "running";
          break;
        case 11:
          res = "warning";
          break;
      }
      return res;
    }, // 计算状态类名枚举
    async query() {
      this.tableLoading = true;
      let obj = JSON.parse(JSON.stringify(this.tableConfig));
      obj.appId = this.appId;

      let _res = await this.$analysisApi.userAnalysis.userGroupList(obj);
      this.tableLoading = false;
      if (_res&&_res.success) {
        this.tableConfig.totalPage = _res.value.total;
        this.tableData = _res.value.list;
      }
    }, // 分群列表函数
    sourceTypeSwitch(val) {
      let res = "未知";
      switch (val) {
        case 1:
          res = "规则创建";
          break;
        case 2:
          res = "结果保存";
          break;
      }
      return res;
    }, // 创建方式
    isRoutineSwitch(val) {
      let res = "未知";
      switch (val) {
        case 1:
          res = "例行";
          break;
        case 0:
          res = "手动";
          break;
      }
      return res;
    }, // 更新方式
    routerChange(path, obj) {
      this.$router.push({
        path: path,
        query: obj
      });
    }, // 路由跳转
    createRulesOpen(value, item = {}) {
      this.createrBool = false;
      let obj = JSON.parse(JSON.stringify(item));
      obj.appId = this.appId;
      this.activeItem = obj;
    }, // 规则创建
    handleSizeChange(page) {
      this.tableConfig.pageSize = page;
      this.tableConfig.currentPage = 1;
      this.query();
    }, // 分页数量改变函数
    current_change(page) {
      this.tableConfig.currentPage = page;
      this.query();
    }, // 页码切换函数
    time_change(time) {
      let date = new Date(time); //获取一个时间对象
      let year = date.getFullYear(); // 获取完整的年份(4位,1970)
      let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      mon = mon < 10 ? "0" + mon : mon;
      let day = date.getDate(); // 获取日(1-31)
      day = day < 10 ? "0" + day : day;
      return year + "-" + mon + "-" + day;
    } // 时间戳转换函数
  },
  created() {
    this.operatorDTO = operationCtx.operatorDTO;
    this.query();
  },
  components: { createRules },
  computed: {
    appId() {
      return this.$store.state.global.appId;
    }
  }
};
</script>
<style scoped lang="scss">
.tableChange {
  cursor: pointer;
  .blueGreen {
    font-size: 16px;
    letter-spacing: 2px;
    margin: 0 6px;
    color: #559ff0;
  }
  i {
    font-size: 0.2rem;
  }
}
.tanleOne {
  font-size: 16px;
  i {
    // font-size: 12px;
    margin: 0 6px;
    font-weight: 600;
  }
  .time {
    color: #475669;
    font-size: 8px;
    padding-left: 20px;
  }
  .info,
  .success,
  .danger,
  .running,
  .warning {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.6;
  }
  .info {
    background: #909399;
  }
  .success {
    background: #13ce66;
  }
  .danger {
    background: #f56c6c;
  }
  .running {
    background: #007aff;
  }
  .warning {
    background: #e6a23c;
  }
}
.userCount {
  font-size: 18px;
  letter-spacing: 2px;
  color: #475669;
  cursor: pointer;
  span {
    padding-left: 28px;
    font-size: 6px;
    font-weight: 400;
    position: relative;
    height: 10px;
    line-height: 10px;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
      "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    i {
      position: absolute;
      display: inline-block;
      width: 8px;
      height: 8px;
      left: 12px;
      top: 50%;
      transform: translate(0, -50%);
      border-radius: 50%;
      opacity: 0.6s;
    }
    .green {
      background: #13ce66;
    }
    .red {
      background: #f56c6c;
    }
  }
}
// 规则创建弹框  Box
.diglog_box {
  header {
    height: 0.38rem;
    line-height: 0.38rem;
    letter-spacing: 1px;
    font-size: 0.24rem;
  }
  section {
    .bolck {
      height: 2rem;
      border: 1px solid #ebeef5;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .leftBolck {
        width: 28%;
        height: 1rem;
        border-right: 1px solid #ebeef5;
        display: flex;
        margin-right: 20px;
        align-items: center;
        justify-content: center;
        i {
          font-size: 0.8rem;
          color: #01b27a;
          font-weight: 300;
          font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
            sans-serif;
        }
      }
      .rightBolck {
        width: 72%;
        height: 96%;
        h4 {
          font-size: 0.2rem;
          height: 0.6rem;
          line-height: 0.6rem;
          margin: 0 auto;
        }
        p {
          margin: 0 auto;
          font-size: 0.16rem;
          text-indent: 12px;
          line-height: 18px;
        }
      }
    }
    .bolck:hover {
      border: 1px solid #01b27a;
    }
  }
  footer {
  }
}
.el-select {
  width: 100%;
}
* {
  box-sizing: border-box;
}
.bigIcon {
  font-size: 0.26rem;
}
.com-list {
  .item {
    width: calc(100% / 3);
    display: inline-block;
    text-align: center;
    color: #5f6e82;
    border-radius: 3px;
    padding: 5px 10px;
    .content {
      cursor: pointer;
      padding: 10px 0;
      background: #f5f8fc;
      border: 1px solid #e9f0f7;
      &:hover {
        border-color: #2dca93;
        color: #2dca93;
      }
      .icon {
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: #fff;
        border-radius: 50%;
        font-size: 20px;
      }
    }
  }
}
::v-deep .el-form-item__error {
  position: absolute;
  left: 71%;
  bottom: 0.3rem;
}
::v-deep .notxt {
  color: #99a9bf;
}
.userGroup::-webkit-scrollbar {
  display: none;
}
.userGroup {
  width: 98%;
  margin: 0 auto;
  height: 98.6%;
  overflow-y: scroll;
  .card_table {
    width: 99%;
    margin: 0 auto 10px;
    padding-bottom: 36px;
    position: relative;
    header {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      min-height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .sel_inpLeft {
        width: 22%;
        margin-right: 0.1rem;
      }
      .sel_inp {
        width: 4rem;
        margin: 0 0.24rem;
      }
      .box {
        display: flex;
        align-items: center;
      }
      .left {
        width: 60%;
        min-height: 40px;
        justify-content: flex-start;
      }
      .right {
        height: 40px;
        justify-content: flex-end;
        width: 40%;
      }
    }
    footer {
      position: absolute;
      width: 97%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      bottom: 0;
      left: 1%;
    }
    section {
      width: 98%;
      // max-height: 66vh;
      overflow-y: scroll;
      margin: 6px auto;
    }
    section::-webkit-scrollbar {
      width: 0 !important;
    }
    section {
      -ms-overflow-style: none;
    }
    section {
      overflow: -moz-scrollbars-none;
    }
  }
}
</style>
